<style>
input[disabled],
textarea[disabled],
select[disabled='disabled'] {
    -webkit-text-fill-color: var(--el-disabled-text-color);
}

.h-0 {
    height: 0;
}

.h-full {
    height: 100%;
}

.padding-0 {
    padding: 0;
}

.border-1 {
    border: 1px solid var(--el-border-color);
}

.border-r-1 {
    border-right: 1px solid var(--el-border-color);
}

.border-b-1 {
    border-bottom: 1px solid var(--el-border-color);
}

.margin-t-1rem {
    margin-top: 1rem;
}

.margin-b-1rem {
    margin-bottom: 1rem;
}

.footer-opt {
    /* background-color: rgb(248 248 248); */
    height: 80px;
}

.version {
    text-align: center;
    font-size: var(--el-font-size-extra-small);
    color: #a8abb2;
}
</style>

<template>
    <el-container style="height: 98vh;">
        <el-main>
            <div v-if="loginWin == 0"></div>
            <el-row v-else-if="loginWin == 1" align="middle" justify="center" class="h-full">
                <el-col :span="loginColSpan">
                    <el-card>
                        <div style="display: flex;justify-content: center;">
                            <el-icon :size="90">
                                <lock />
                            </el-icon>
                        </div>
                        <div style="text-align: center;font-size: var(--el-font-size-medium);">密码小本本已锁定，请输入主密码打开。</div>
                        <div class="margin-t-1rem">
                            <el-input ref="passwordInputRef" v-model.trim="loginForm.password"
                                @keyup.enter.native="signIn" autofocus size="large" type="password"
                                :placeholder="changePwdInput ? '原密码' : '主密码'" show-password />
                        </div>
                        <div v-if="changePwdInput" class="margin-t-1rem">
                            <el-input v-model.trim="loginForm.newPassword1" @keyup.enter.native="changePwd" size="large"
                                type="password" placeholder="新密码" show-password />
                        </div>
                        <div v-if="changePwdInput" class="margin-t-1rem">
                            <el-input v-model.trim="loginForm.newPassword2" @keyup.enter.native="changePwd" size="large"
                                type="password" placeholder="新密码确认" show-password />
                        </div>
                        <div class="margin-t-1rem">
                            <el-row justify="space-between">
                                <el-col :span="11">
                                    <el-button style="width: 100%;" size="large" plain @click="changePwdHandler">{{
                                        changePwdInput ? '取消' : '修改密码'
                                    }}</el-button>
                                </el-col>
                                <el-col :span="11">
                                    <el-button v-if="changePwdInput" style="width: 100%;" size="large" type="primary"
                                        plain @click="changePwd" :loading="btnLoading">提交</el-button>
                                    <el-button v-else style="width: 100%;" size="large" type="primary" plain
                                        @click="signIn" :loading="btnLoading">
                                        打开&nbsp;
                                        <el-icon :size="16">
                                            <unlock />
                                        </el-icon>
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="margin-t-1rem version">{{ version.one }}</div>
                        <div class="version">{{ version.two }}</div>
                        <div class="version">{{ version.three }}</div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row v-else class="h-full border-1">
                <el-col :span="5">
                    <menu-com></menu-com>
                </el-col>
                <el-col :span="9">
                    <item-com></item-com>
                </el-col>
                <el-col :span="10">
                    <details-com></details-com>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import MenuCom from './components/MenuCom.vue';
import ItemCom from './components/ItemCom.vue';
import DetailsCom from './components/DetailsCom.vue';
import { onMounted, reactive, ref } from 'vue';
import {
    Lock,
    Unlock
} from '@element-plus/icons-vue'
import { ElInput, ElMessage } from 'element-plus';
import { useStore } from './main';
import { Version } from './assets/core';

const store = useStore();

const loginColSpan = ref(7);
const version = reactive<Version>({
    one: "",
    two: "",
    three: ""
});
onMounted(async () => {
    let outerWidth = window.outerWidth;
    if (outerWidth > 1000) {
        loginColSpan.value = 7;
    } else if (outerWidth <= 1000 && outerWidth >= 844) {
        loginColSpan.value = 14;
    } else {
        loginColSpan.value = 24;
    }
    store.pwdmApi.version().then(ver => {
        version.one = ver.one;
        version.two = ver.two;
        version.three = ver.three;
    });
    //获取登录状态
    try {
        await store.pwdmApi.auth();
        loginWin.value = 2;
    } catch (error) {
        loginWin.value = 1;
    }
    //定时监测登录状态，及时锁定页面
    setInterval(() => {
        store.pwdmApi.auth().catch(() => {
            loginWin.value = 1;
            store.$reset();//重制状态
        });
    }, 1000 * 60 * 31);
});

const loginWin = ref<0 | 1 | 2>(0);//登录页面 0:空白页（防抖）；1:登录页面；2:首页
const loginForm = reactive({//登录数据
    username: "admin",
    password: "",
    newPassword1: "",
    newPassword2: ""
});
const btnLoading = ref(false);
const signIn = () => {
    if (!loginForm.password) {
        ElMessage({
            message: '没有输入主密码',
            type: 'warning',
        })
        return;
    }
    if (!btnLoading.value) {
        btnLoading.value = true;
        store.pwdmApi.signIn(loginForm.username, loginForm.password).then(username => {
            btnLoading.value = false;
            loginWin.value = 2;
        }).catch(error => {
            btnLoading.value = false;
            ElMessage({
                message: "密码错误",
                type: 'error',
            });
        });
    }
};

const changePwdInput = ref(false);
const passwordInputRef = ref<InstanceType<typeof ElInput>>();
/**
 * 切换修改密码输入框
 */
const changePwdHandler = () => {
    changePwdInput.value = !changePwdInput.value;
    //获取输入焦点
    setTimeout(() => {
        passwordInputRef.value?.focus();
    }, 500);
};
/**
 * 修改密码
 */
const changePwd = async () => {
    if (!loginForm.password) {
        ElMessage({
            message: '原密码为空',
            type: 'warning',
        })
        return;
    }
    if (!loginForm.newPassword1) {
        ElMessage({
            message: '新密码为空',
            type: 'warning',
        })
        return;
    }
    if (!loginForm.newPassword2) {
        ElMessage({
            message: '没有确认新密码',
            type: 'warning',
        })
        return;
    }
    if (loginForm.newPassword1 != loginForm.newPassword2) {
        ElMessage({
            message: '两次输入的密码不同',
            type: 'warning',
        })
        return;
    }
    if (!btnLoading.value) {
        btnLoading.value = true;
        try {
            //校验原密码
            await store.pwdmApi.signIn(loginForm.username, loginForm.password);
            //修改密码
            await store.pwdmApi.chgPwd(loginForm.password, loginForm.newPassword1);
            loginForm.password = '';
            loginForm.newPassword1 = '';
            loginForm.newPassword2 = '';
            ElMessage({
                message: "密码修改成功",
                type: 'success',
            });
            changePwdInput.value = false;
        } catch (error) {
            ElMessage({
                message: '原密码错误',
                type: 'error',
            })
        }
        btnLoading.value = false;
    }
};

</script>